<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <svg id="svg">
        <defs id = 'defs'></defs>
        <g stroke = 'plum' stroke-width = '2'>
            <!--x轴-->
            <line x1 = '50' y1 = '550' x2 = '750' y2 = '550'></line>
            <line x1 = '740' y1 = '540' x2 = '750' y2 = '550'></line>
            <line x1 = '740' y1 = '560' x2 = '750' y2 = '550'></line>
            <!--Y轴-->
            <line x1 = '50' y1 = '50' x2 = '50' y2 = '550'></line>
            <line x1 = '50' y1 = '50' x2 = '40' y2 = '60'></line>
            <line x1 = '50' y1 = '50' x2 = '60' y2 = '60'></line>
        </g>
    </svg>
</body>
</html>
<script>
    //准备数据 ===服务器中
    var data = [
        {"department":"部门1","value":250},
        {"department":"部门2","value":470},
        {"department":"部门3","value":200},
        {"department":"部门4","value":180},
        {"department":"部门5","value":100},
        {"department":"部门6","value":340},
    ]
    var w = 800;
    var h = 600;
    svg.setAttribute('width', w);
    svg.setAttribute('height', h);
    //计算出每个柱子的宽度
    var colwidth = (w-100)/(data.length*2+1);
    for(var i = 0; i < data.length; i++){
        var obj = data[i];
        var rw = colwidth;//柱子宽度
        var rh = obj.value;//柱子高度
        console.log(rh)
        var x = 50 + colwidth * (2 * i + 1);
        var y = h - 50 - rh;
        
        //设置渐变色，线性渐变
        var c = rc();
        var color = 
            `<linearGradient id = 'g${i}' x1 = '0' y1 = '0' x2 = '0' y2 = '100%'>
                <stop offset = '0' stop-color = '${c}'></stop>
                <stop offset = '100%' stop-color = '${c}' stop-opacity = '0'></stop>
            </linearGradient>`;
        defs.innerHTML += color;
        
        //动态创建矩形
        var rect = document.createElementNS('http://www.w3.org/2000/svg','rect');
        rect.setAttribute('width',rw);
        rect.setAttribute('height',rh);
        rect.setAttribute('x',x);
        rect.setAttribute('y',y);
        rect.setAttribute('fill',`url(#g${i})`);
        svg.appendChild(rect);
        
        //动态添加文本和值
        var texts = document.createElementNS('http://www.w3.org/2000/svg','text')
        texts.setAttribute('x', x);
        texts.setAttribute('y', y + rh + 20);
        texts.setAttribute('fill',`url(#g${i})`);
        texts.innerHTML = obj.department;
        svg.appendChild(texts);
        
        var values = document.createElementNS('http://www.w3.org/2000/svg','text')
        values.setAttribute('x', x + 10);
        values.setAttribute('y', y - 5);
        values.setAttribute('fill',`url(#g${i})`);
        values.innerHTML = obj.value;
        svg.appendChild(values);
    }
    //随机颜色
    function rc(){
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        return "rgb("+ r +","+ g +","+ b +")"
    }		
</script>
